/*! The common styles for JPet Store */

/*
 * What follows is the result of much research on cross-browser styling.
 *
 * Author: Tao Shi
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/* 
 * Set a page background globally.
 */
html {
    /* background: url("../img/bg.gif") repeat scroll 0 0 #EDECE9; */
    background-color: #fff;
}

/* 
 * Since we used the fixed top navigation bar, 
 * we need set body to leave top padding 70px.
 */
body {
	background-color: transparent;
	padding-top: 70px;
}


/* ==========================================================================
   Common styles
   ========================================================================== */

/* 
 * Make the loading image of infinite-scroll plugin 
 * horizontal align with center.
 */

.last-block{
   margin-bottom: 0px;
   font-size: 12px;
}

.error-modal .panel-body{
   overflow: auto;
}

.navbar-brand{
	position: relative;
}

.navbar-brand img{
	top: -13px;
	width: 44px;
	position: relative;
}

#infscr-loading{
   border-top: 1px solid #ddd;
   padding-top: 15px;
}
#infscr-loading img{
	display: block;
	margin: 0 auto;
}
#infscr-loading > div{
	text-align: center;
}

/* 
 * Reset the background color to #f0f0f0 for thumbnail item
 * and make it bordless.
 */
.masonry-container .thumbnail.item{
	border: 0px;
	border-radius: 0px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.thumbnail.item .breadcrumb{
	margin-bottom: 10px;
}
.thumbnail.item > a{
	display: block;
	position: relative;
    margin: -4px -4px 3px;
}

/* 
 * Add hover mask for the image included in thumbnail item.
 */
a .hover-mask {
    border-radius: 0;
    bottom: 0;
    box-shadow: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: background 0.2s linear 0s;
    z-index: 100;
}
a:hover .hover-mask {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}
a:active .hover-mask {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
}

/*
 * Add label-danger color to cart badge.
 */
#cart-num {
	background-color: #D9534F;
}

/**
 * General error box for form validaton
 */
.general-error{
	display: none;
}
label.invalid{
    padding: 5px;
    border: 1px solid #ebccd1;
    background-color: #f2dede;
    color: #A94442;
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 11px;
    margin-top: -1px;
}
input.valid{
	background-color: #DFF0D8;
    color: #3C763D;
}
input.valid:after { 
	content: "\f005";
	font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    margin:0px 0px 0px 10px;
    text-decoration:none;
}
input.invalid{
	border-color: #ebccd1;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/* 
 * Reset the background color to #f0f0f0 for thumbnail item
 * and make it bordless.
 */
.masonry-container .thumbnail.item{
	border: 0px;
	border-radius: 0px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.thumbnail.item .breadcrumb{
	margin-bottom: 10px;
}
.thumbnail.item .item-avatar{
	height: 180px;
}
.thumbnail.item > a{
	display: block;
	position: relative;
    margin: -4px -4px 3px;
    background-color: #E8E8E8;
}
.thumbnail.item .caption{
	font-size: 12px;
}
.thumbnail.item .caption > p{
	line-height: 22px;
}
.thumbnail.item .caption > p:first-child > .label:first-child{
	margin-right: 5px;
}
.thumbnail.item .caption > .list-ground{
	padding-left: 0px;
}
.thumbnail.item .caption > .list-ground > .list-group-item{
	margin-left: -14px;
	margin-right: -14px;
	border-radius: 0px;
	padding: 6px 15px;
}

.carousel .carousel-inner .item > img{
	margin: 0 auto;
}

.carousel .carousel-inner .carousel-caption{
	border-radius: 3px;
	background: rgba(0,0,0,0.3);
}

/*
 *
 */
.image-box{
	position: relative;
}
.image-box img{
	background-color: #ccc;
}

.item-header{
	font-weight: bold;
	background-color: #EAEAEA;
	padding: 8px 12px;
	margin: 30px 0 10px;
	border-left: 5px solid #428bca;
	border-radius: 5px;
	font-size: 12px;
}
.modal .item-header{
	margin-top: 10px;
}
.modal .item-header:first-child{
	margin-top: 0px;
}

/* 
 * Add hover mask for the image included in thumbnail item.
 */
a .hover-mask {
    border-radius: 0;
    bottom: 0;
    box-shadow: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: background 0.2s linear 0s;
    z-index: 100;
}
a:hover .hover-mask {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}
a:active .hover-mask {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
}

/*
 * for typeahead
 */
.typeahead.dropdown-menu{
	width: 100%;
}
.typeahead.dropdown-menu > li > a{
	color: #aaa;
	padding: 6px 20px;
}
.typeahead.dropdown-menu > li > a > strong{
	color: #333;
	text-decoration: underline;
}

/*
 * for label on required field
 */
label.required:before{
	content: '* ';
	color: red;
	font-weight: bold;
	vertical-align: middle;
}

/*
 * for category number
 */
.cate-num{
	display: none;
}

/*
 * for content
 */
.content-container{
	position: relative;
	margin-top: 60px;
}
.content-container a.list-group-item,
.content-container .panel-heading{
	font-size: 12px;
}
.content-container a.list-group-item{
	padding-left: 25px;
}
.left-sidebar, .right-sidebar{
	position: relative;
}
@media (max-width: 767px) {
	.content-container .affix-bottom,
	.content-container .affix-top, 
	.content-container .affix{
		width: 125px;
	}
	.right-sidebar{
		display: none;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.content-container .affix-bottom,
	.content-container .affix-top, 
	.content-container .affix{
		width: 220px;
	}
	.right-sidebar{
		display: none;
	}
}
@media (min-width: 992px){
	.content-container .affix-bottom,
	.content-container .affix-top, 
	.content-container .affix{
		width: 131px;
	}
}
@media (min-width: 1200px){
	.content-container .affix-bottom,
	.content-container .affix-top, 
	.content-container .affix{
		width: 165px;
	}
}
.article-header{
	font-size: 30px;
	font-weight: bold;
	padding-bottom: 5px;
	margin: 0 0 5px;
	border-bottom: 1px solid #eee;
}
.article-meta-info{
	font-size: 12px;
	margin-bottom: 15px;
}
.input-wrapper{
	display: inline;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/*
 * Responsive design for mansonry thumbnail items.
 */
@media (max-width: 767px) {
  .masonry-container .item{
	width: 100%;
  }
  .masonry-container .gutter{
	width: 0px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .masonry-container .item{
	width: 49%;
  }
  .masonry-container .gutter{
	width: 2%;
  }
}
@media (min-width: 992px){
  .masonry-container .item{
	width: 32%;
  }
  .masonry-container .gutter{
	width: 2%;
  }
}